<template>
  <div class="pi-contain">
    <h3>{{photolist[id-1].title}}</h3>
    <p class="subtitle">
      <span>{{photolist[id-1].add_time|dataFormat}}</span>
      <span>点击:{{photolist[id-1].click}}次</span>
    </p>

    <hr>

    <!-- 缩略图区域-->
    <div class="photoSize">
       <vue-preview  :slides="slide1" @close="handleClose" ></vue-preview>
    </div>



    <!-- 图片内容区域-->
    <div class="content" v-html="photolist[id-1].title"></div>

    <!-- 放一个现成的评论子组件-->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
  /* 导入评论子组件*/
  import comment from '../subcompoments/Comment.vue'
  export default{
    data(){
      return{
        id:this.$route.params.id,

        photolist:[
          {
            id:1,
            title:'龙娘七七七埋藏的宝藏轻小说 ',
            click:4,
            add_time:'2015-04-10T04:59:13.000Z',
            content:'故事讲述男主角八真重护因拒绝继承家业而遭父亲逐出家门，并被流放至学生特区“七重岛”上。仅有极少生活费的重护找到一间月租仅为五千日元的公寓，却没想到入住的房间内竟然有一位地缚灵龙娘七七七，而她与岛上的秘宝“七七七藏品”有着紧密的联系…… '
          },
          {
            id:2,
            title:'碧阳学园学生会默示录轻小说 ',
            click:8,
            add_time:'2015-04-30T08:55:13.000Z',
            content:'本篇为葵关南所著“碧阳学园学生会默示录”系列的第一集。私立碧阳学园学生会，以会长为首的美少女成员四人组集中的乐园，但是存在一个唯一的异性——副会长的杉崎键，而他有着不为人知的一面。作为“议事录”系列的外传，故事不再局限于学生会！在本篇里着墨不多、学生会成员之外的角色们也活跃于各个短'
          },
          {
            id:3,
            title:'魔法的禁书目录',
            click:10,
            add_time:'2025-11-12T07:29:13.000Z',
            content:'故事讲述在将“超能力开发”作为学校课程的学园都市里，人们每天都在超能力开发上进行相互竞争。根据能力高低不同，可以分为6级，从无能力（level 0）到超能力（level 5）。主角上条当麻是一个无能力者，但并非完全没有能力，他的能力是能够将一切异能之力无效化…… '
          },
          {
            id:4,
            title:'永生之酒轻小说 ',
            click:12,
            add_time:'2005-09-10T04:59:13.000Z',
            content:'1711年，背井离乡的炼金术师们得到了永生之酒，成为了“不死者”，“不死者”之间相互“吞食”的悲剧也开始上演。到了1930年，在禁酒令时代的纽约，地下组织卡莫拉正忙于准备数日后的重要仪式，强盗情侣刚刚抵达纽约中央车站，黑手党的甘德鲁三兄弟正遇到麻烦……'
          },
          {
            id:5,
            title:'横滨车站SF',
            click:34,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'横滨车站SF漫画，不断地进行改建的横滨车站，终于开始自我增殖，之后又过了两百年的日本。本州的99％被横滨车站覆盖，在站体的支配下，人类分为脑中埋入「Suika」并住在「站内」的人，'
          },
          {
            id:6,
            title:'碧阳学园学生会默示录',
            click:77,
            add_time:'2015-08-06T09:39:23.000Z',
            content:'本篇为葵关南所著“碧阳学园学生会默示录”系列的第一集。私立碧阳学园学生会，以会长为首的美少女成员四人组集中的乐园，但是存在一个唯一的异性——副会长的杉崎键，而他有着不为人知的一面。作为“议事录”系列的外传，故事不再局限于学生会！在本篇里着墨不多、学生会成员之外的角色们也活跃于各个短篇之中。 '
          },
          {
            id:7,
            title:'龙娘七七七埋藏的宝藏轻小说 ',
            click:399,
            add_time:'2069-06-20T08:59:13.000Z',
            content:'故事讲述男主角八真重护因拒绝继承家业而遭父亲逐出家门，并被流放至学生特区“七重岛”上。仅有极少生活费的重护找到一间月租仅为五千日元的公寓，却没想到入住的房间内竟然有一位地缚灵龙娘七七七，而她与岛上的秘宝“七七七藏品”有着紧密的联系…… '
          },
          {
            id:8,
            title:'魔法的禁书目录轻小说F',
            click:888,
            add_time:'2025-09-10T08:49:23.000Z',
            content:'故事讲述在将“超能力开发”作为学校课程的学园都市里，人们每天都在超能力开发上进行相互竞争。根据能力高低不同，可以分为6级，从无能力（level 0）到超能力（level 5）。主角上条当麻是一个无能力者，但并非完全没有能力，他的能力是能够将一切异能之力无效化…… '
          },
          {
            id:9,
            title:'永生之酒',
            click:34,
            add_time:'2016-08-22T06:26:13.000Z',
            content:'1711年，背井离乡的炼金术师们得到了永生之酒，成为了“不死者”，“不死者”之间相互“吞食”的悲剧也开始上演。到了1930年，在禁酒令时代的纽约，地下组织卡莫拉正忙于准备数日后的重要仪式，强盗情侣刚刚抵达纽约中央车站，黑手党的甘德鲁三兄弟正遇到麻烦…… '
          },
          {
            id:10,
            title:'魔法的禁书目录SS轻小说 ',
            click:51215,
            add_time:'2005-09-10T12:25:13.000Z',
            content:'原本上条当麻与吹寄制理只是在聊着些日常话题，没想到最后演变成了火锅派对，这让小萌老师非常头疼。在伦敦，魔法师少女们迎来混乱的一天，这到底是怎么回事？一方通行坠入学园都市的黑暗面，等待着他的将会是……？'
          },
          {
            id:11,
            title:'无头骑士异闻录SH轻小说 ',
            click:34,
            add_time:'1998-04-23T04:59:13.000Z',
            content:'DOLLARS事件结束一年后，三头池八寻，因与生俱来超越常人的战斗力而备受歧视和排挤，为了寻求对自我的认可，少年来到包罗万象的池袋，追寻无头骑士和平和岛静雄。在这里他遇到了琴南久音和辰神姬香，三人又会卷入怎么样的风波里…… '
          },
          {
            id:12,
            title:'重装武器F',
            click:8545,
            add_time:'2015-03-27T06:49:53.000Z',
            content:'战争并没有消失。但是有了变化。在人类默默进行无聊的彼此杀戮之中产生变化。超大型武器——OBJECT。它的出现改变了战争的一切…… '
          },
          {
            id:13,
            title:'奋斗吧！系统工程师',
            click:12152,
            add_time:'2018-06-19T04:59:13.000Z',
            content:'平凡的社会新鲜人樱坂工兵历经严峻的求职后，终於得以就职于某系统开发公司。而负责指导他的室见立华，是个外表怎么看都像个十几岁少女的超级工作狂。在既忙碌又粗暴的她手下工作，虽然时而遭到严格指教，或被冷淡地弃置不管，但工兵依然不懈奋斗着…… '
          },
          {
            id:14,
            title:'龙与虎轻小说 ',
            click:34453,
            add_time:'2081-06-13T08:49:13.000Z',
            content:'樱花飞舞的四月，眼神凶狠却极其普通的男孩——高须龙儿迎来崭新的高中二年级生活。然而在阴差阳错之下，他居然与众人害怕、凶暴残忍的“掌中老虎”逢坂大河结下了恩怨——龙虎相争、友情和恋爱之间的“战斗”，就此拉开序幕！ '
          },
          {
            id:15,
            title:'黑色子弹',
            click:34554,
            add_time:'2015-12-10T08:29:13.000Z',
            content:'不久的未来，人类在与病毒性寄生生物“原肠动物”的战争中败北。他们被驱逐至狭窄的领土中，带着恐惧与绝望苟且偷生…… '
          },
          {
            id:16,
            title:'天魔黑兔轻小说 ',
            click:3554,
            add_time:'2015-11-10T23:19:13.000Z',
            content:'高中一年级学生铁大兔自以为人生平凡，每天都过着游手好闲的日子。即使他已经遗忘了与“她”留下最宝贵的记忆，许下最重要的约定，还有那已经融入了血肉的诅咒，但在世界那一边的“她”却仍然为理应已经失去的回忆微笑…… '
          },
          {
            id:17,
            title:'神样家族',
            click:31554,
            add_time:'2005-07-10T08:59:13.000Z',
            content:'神山佐间太郎的父亲是神，他的母亲、姐姐、妹妹是女神，身边还有天使帮忙。 但是由于家人的溺爱，佐间太郎的任何愿望都会被实现，这样他觉得很没意思。 就连自己第一次喜欢上的女孩子，都因为父亲的神力影响而主动倒追，让佐间太郎吃不消…… '
          },
          {
            id:18,
            title:'大传说中勇者的传说',
            click:345454,
            add_time:'2055-08-10T04:59:13.000Z',
            content:'本篇是《传说中勇者的传说》的续篇。成为罗德兰王的西昂在寄宿在他体内的“勇者”的影响下，与莱纳、菲利斯决裂并将莱纳囚禁。在菲利斯的帮助下，莱纳逃出监狱并立誓拯救西昂。与此同时，尼尔法皇国也在罗德兰的进攻下陷入水深火热之境。面对这种情况，莱纳与菲利斯做出了抉择，各方势力也悄然而动。故事就此展开'
          },
          {
            id:19,
            title:'为美好的世界献上祝福',
            click:315554,
            add_time:'2035-08-16T04:19:13.000Z',
            content:'喜爱游戏的家里蹲少年佐藤和真偶然外出时遇上事故身亡，但是在他眼前，出现了一位自称女神的美少女，答应让他转生到异世界。阴差阳错地带着女神一同来到异世界的和真，因为自己的冒险者能力不足，为了能够生存下去而开始努力工作…… '
          },
          {
            id:20,
            title:'金色时光轻小说 ',
            click:3145544,
            add_time:'2025-08-10T08:59:13.000Z',
            content:'顺利考上大学、一个人来到东京生活，多田万里因为许多第一次而兴奋不已，却不料在入学典礼的当天就面临挑战——压到全场气势的大小姐，加贺香子强势介入万里的生活之中。而对于耀眼又危险香子，万里也无法移开视线，置之不理——在人生的金色时光里，他们将会摩擦出怎么样的恋爱火花呢？ '
          },
          {
            id:21,
            title:'传说的勇者的传说轻小说 ',
            click:34155,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'这是一个有诸多传说的世界。大陆南面的国家——罗兰德帝国的人民因贵族腐败而过着贫苦的生活。受命于国王西昂的青年莱纳与少女菲利斯还在继续他们的旅程。主角莱纳却只想建立一个一天到晚靠睡觉就能活下去的王国。他们却被卷进战争的漩涡之中，三个年轻人的命运就这样复杂地纠缠在一起！新感觉幻想风冒险剧——在此开幕！ ，'
          },
          {
            id:22,
            title:'碧阳学园学生会议事录',
            click:35665654,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'本篇为葵关南所著“碧阳学园学生会议事录”系列的第一集。故事讲述碧阳学园学生会的成员们在开会时讨论的各种欢乐话题，包括恶搞其他动画的经典剧情，或是吐槽某些社会现象等等。其中副会长兼唯一男性成员杉崎键是话题的主要发起人，而他加入学生会的目的居然是攻略其他漂亮又萌萌哒的妹子成员?! '
          },
          {
            id:23,
            title:'梦沉玛德拉 ',
            click:35454,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'这是一个为追求新技术而扩张领土、不断蚕食异教徒领地的时代。青年炼金术师库斯拉在研究过程中做出了与教会意志相违背的行为，被惩罚性地派往战争最前线——格尔拜提城的工作室，他将在那里与同为炼金术师的老朋友韦兰会合。 在格尔拜提城，库斯拉等人得知前任炼金术师已经神秘死亡……'
          },
          {
            id:24,
            title:'魔装少女就是本少爷',
            click:345454,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'相川步，本来只是个平凡的高中生，却意外卷入震惊社会的连环杀人案身亡，不过在事件发生前偶遇的少女死灵法师“优”，让他以不死之身的僵尸之身重回人间。可是，他之后被迫穿上女装当“魔装少女”，与来自魔法世界的少女战士春奈开启了不一样的生活!'
          },
          {
            id:25,
            title:'魔王勇者',
            click:15534,
            add_time:'2265-08-10T04:59:13.000Z',
            content:'故事讲述了在一个架空的类欧洲中世纪世界中，身为勇者的男主角和虽然身为“魔王”但本性善良的女主角邂逅，通过沟通放下了嫌隙，开始一同踏上了为这个黑暗的世界寻求光明的道路。这中间，他们遇上了值得信赖的同伴，也不得不与心怀鬼胎的敌人交锋，通过彼此的信任与坚持不懈的努力，他们终于渐渐看见了引，'
          },
        ],
        slide1:[
                  {
                    src: 'https://tse2-mm.cn.bing.net/th/id/OIP.LtyQL42OYPpotZXf-BDNKAHaKa?w=191&h=269&c=7&o=5&pid=1.7',
                    msrc: 'https://tse2-mm.cn.bing.net/th/id/OIP.LtyQL42OYPpotZXf-BDNKAHaKa?w=191&h=269&c=7&o=5&pid=1.7',
                    alt: 'picture1',
                    title: '欢迎赏图',
                    w: 300,
                    h: 400
                  },
                  {
                    src: 'https://tse4-mm.cn.bing.net/th/id/OIP.1pC1a0kCLvWiGCfV65eNsgHaHZ?w=191&h=190&c=7&o=5&pid=1.7',
                    msrc: 'https://tse4-mm.cn.bing.net/th/id/OIP.1pC1a0kCLvWiGCfV65eNsgHaHZ?w=191&h=190&c=7&o=5&pid=1.7',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                  },
                  {
                    src: 'https://tse2-mm.cn.bing.net/th/id/OIP.1Myvutey_EgzOHb3e39WZwHaHn?w=191&h=196&c=7&o=5&pid=1.7',
                    msrc: 'https://tse2-mm.cn.bing.net/th/id/OIP.1Myvutey_EgzOHb3e39WZwHaHn?w=191&h=196&c=7&o=5&pid=1.7',
                    alt: 'picture3',
                    title: 'Image Caption 3',
                    w: 300,
                    h: 400
                  },
                  {
                    src: 'https://tse2-mm.cn.bing.net/th/id/OIP.omqqZPaifyaH38lwPSHT7QHaHa?w=191&h=191&c=7&o=5&pid=1.7',
                    msrc: 'https://tse2-mm.cn.bing.net/th/id/OIP.omqqZPaifyaH38lwPSHT7QHaHa?w=191&h=191&c=7&o=5&pid=1.7',
                    alt: 'picture4',
                    title: 'Image Caption 4',
                    w: 1200,
                    h: 900
                  },
                  {
                    src: 'https://tse2-mm.cn.bing.net/th/id/OIP.ImXRQCXyeUep6-zQKfLf7wHaNK?w=168&h=300&c=7&o=5&pid=1.7',
                    msrc: 'https://tse2-mm.cn.bing.net/th/id/OIP.ImXRQCXyeUep6-zQKfLf7wHaNK?w=168&h=300&c=7&o=5&pid=1.7',
                    alt: 'picture5',
                    title: 'Image Caption 5',
                    w: 300,
                    h: 400
                  },
                ]

      }
    },
    props:["img"],
    methods: {
            handleClose () {
              console.log('close event')
            }
          },
    components:{ //注册评论子组件
      'cmt-box':comment
    }
  }
</script>

<style scoped>
  .pi-contain{
    padding: 3px;
  }
  h3{
    color: #26A2ff;
    font-size: 13px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle{
    display: flex;
    justify-content: space-between;
  }

</style>
